<div class="page-title">
  <h4>应用列表</h4>
  <!--nzi-document-center-->
  <a class="pull-right help-link" nzi-document-center [docTitle]="'应用管理'">
    <i class="anticon anticon-question-circle-o"></i>应用使用指南
  </a>
</div>
<div class="page-header">
  <p style="margin-bottom: 0;">每个应用下包含一组函数，应用为函数提供了相对独立的运行环境，在创建函数时，您可以选择函数所属应用，从而更有效地管理函数。</p>
</div>
<div class="padding-content area-col-white">
  <div class="table-top">
    <div class="table-operations clearfix ">
      <div class="pull-left">
        <in-acl-source [inGroup]="'headerAction'" [inService]="'fcs'" [inResourceType]="'fcs-group'"
          [inActions]="['CreateGroup']" [inIsLast]="true" #headerAction>
          <in-acl-btn [inActions]="headerAction.resActions" inAction="CreateGroup" inLabel="创建应用" > 
            <button nz-button nzType="primary" class="btn-add" (click)="createApplication()"><i class="fas fa-plus"></i>创建应用
            </button>
          </in-acl-btn>
        </in-acl-source>
        
      </div>
      <div class="pull-right">
        <!-- 搜索 -->
        <!-- <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
          <input type="text"
                 nzSize="large"
                 nz-input
                 placeholder="请输入应用名称"
                 [(ngModel)]="searchValue"
                 (keyup.enter)="getApplicationList()">
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button class="search-btn" nz-button nzSearch (click)="getApplicationList()">
            <i class="anticon anticon-search search-icon"></i>
          </button>
        </ng-template> -->

        <nz-input-group nzSearch [nzSuffix]="suffixIconButton" style="width: 2rem;">
          <input type="text" [(ngModel)]="searchValue" nz-input placeholder="请输入应用名称查询" (keyup.enter)="getApplicationList()">
        </nz-input-group>
        <ng-template #suffixIconButton>
          <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="searchValue" (click)="searchValue = '';getApplicationList()"></i>
          <button nz-button nzSearch (click)="getApplicationList()">
            <i class="anticon anticon-search"></i>
          </button>
        </ng-template>





        <button nz-button class="table-top-opt" (click)="refresh()" nz-popover [nzContent]="'刷新'"><i
          class="anticon anticon-reload"></i></button>
      </div>
    </div>
  </div>
  <div class="app-table">
    <nz-table #nzTable
              [nzData]="applicationList"
              [nzTotal]="totalCount"
              [nzShowTotal]="rangeTemplate"
              [(nzPageSize)]="pageSize"
              [(nzPageIndex)]="pageNo"
              nzShowSizeChanger
              [nzLoading]="isLoading"
              [nzFrontPagination]="false"
              [nzNoResult]="noResult"
              (nzPageIndexChange)="getApplicationList()"
              (nzPageSizeChange)="getApplicationList()"
              [nzShowPagination]="totalCount>10"
              class="table-fixed">
      <thead>
        <tr>
          <th nzWidth="2.5rem">ID/名称</th>
          <th>描述</th>
          <th nzWidth="2rem">更新时间</th>
          <th nzWidth="1.6rem">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of nzTable.data; let i = index;trackBy: trackById">
          <td>
            
              <in-acl-btn [inActions]="data?.resActions" inAction="GetGroup" inLabel="{{data.id}}"> 
                  <p nz-popover [nzPopoverContent]="data.id" class="ellipsis">
                    <a routerLink="detail/{{data.id}}"><span class="ellipsis before-opt">{{data.id}}</span></a>
                    <a class="td-opt" ngxClipboard [cbContent]="data?.id" (cbOnSuccess)="successFun()">
                      <i class="iconfont icon-gongnengtubiao-fuzhicopy"></i>
                    </a>
                  </p>
             </in-acl-btn>
            <p class="ellipsis">
              <span nz-popover [nzPopoverContent]="data.displayName" >{{data.displayName}}</span>
            </p>    
            
          </td>
          <td nz-popover [nzContent]="data?.description" [nzOverlayStyle]="{'max-width': '7rem'}"><span class="table-version-description">{{data?.description || '--'}}</span></td>
          <td>{{(data.updateTime| date: 'yyyy-MM-dd HH:mm:ss')  || '--'}}</td>
          <td class="table-opt" *ngIf="!isLoading">
            <in-acl-source [inGroup]="'tableAction'" [inService]="'fcs'" [inResourceType]="'fcs-group'"
            [inActions]="['GetGroup','UpdateGroup','DeleteGroup']" [inInstanceId]="data?.id" [inResourceAccountId]="data?.accountId" [inTrData]="data" [inIsLast]="i===nzTable.data.length-1">
            <in-acl-source [inGroup]="'headerAction1'" [inService]="'fcs'" [inResourceType]="'fcs-function'"
          [inActions]="['CreateFunction']" [inIsLast]="true" #headerAction1>
            <in-acl-btn [inActions]="headerAction1.resActions" inAction="CreateFunction" inLabel="创建函数"> 
            <a (click)="createFunction(data.id)">创建函数</a>
            </in-acl-btn>
            <nz-dropdown [nzTrigger]="'hover'">
              <a nz-dropdown>
                更多 <i class="anticon anticon-caret-down"></i>
              </a>
              <ul nz-menu class="ant-table-dropdown-menu">
                
                <in-acl-btn [inActions]="data?.resActions" inAction="UpdateGroup" inLabel="编辑"> 
                <li (click)="editApplication(data)" nz-menu-item>编辑</li>
              </in-acl-btn>
              <in-acl-btn [inActions]="data?.resActions" inAction="DeleteGroup" inLabel="删除"> 
                <li (click)="deleteApplication(data)" nz-menu-item>删除</li>
              </in-acl-btn>
              
              </ul>
            </nz-dropdown>
            </in-acl-source>
          </in-acl-source>
          </td>
        </tr>
      </tbody>
      <ng-template #noResult>
        <ng-container *ngIf="!hasInputValue">
          <table-no-result-add title="抱歉，你还没有应用！"  (actionClick)="createApplication()" [inAclActions]="headerAction.resActions" [inAction]="'CreateGroup'"  inLabel="去创建">
          </table-no-result-add>
        </ng-container>
        <ng-container *ngIf="hasInputValue">
          <table-no-result-search></table-no-result-search>
        </ng-container>
      </ng-template>
      <ng-template #rangeTemplate let-range="range" let-total>
        共{{totalCount}}条
      </ng-template>
    </nz-table>
  </div>
</div>
